import pao = require('../public');
import paoClient = require('./client');

export const moduleName = "pao.client";

/**
 * 按钮
 */
@pao.addon("按钮", "按钮控制器", moduleName)
@paoClient.template('<button type="button">清除</button>')
export class button extends paoClient.baseControl {
    /**
     * 内部html
     */
    innerHtml?: string;
    /**
     * 点击事件
     */
    onClick() {};

    
    onAfterBind?() {
        if(this.placeHolder) {
            $(this.element).attr("placeholder",this.placeHolder);
        }
        if(this.type) {
            $(this.element).attr("type",this.type);
        }
        if(this.ariaLabel) {
            $(this.element).attr("aria-label",this.ariaLabel);
        }
        if(this.ariaDescribedBy) {
            $(this.element).attr("aria-describedby",this.ariaDescribedBy);
        }
        if(this.styleClass) {
            this.addClass(this.styleClass);
        }
    }
}

/**
 * 输入框
 */
@pao.addon("输入框", "输入框控制器", moduleName)
@paoClient.template('<input type="text"/>')
export class input extends paoClient.baseControl {
    /**
     * 类型
     */
    type?: string = "text";
    /**
     * 占位文字
     */
    placeHolder?: string;
    /**
     * 
     */
    ariaDescribedBy?: string;
    /**
     * 
     */
    ariaLabel?: string;
    /**
     * 风格类型
     */
    styleClass?: string;

    onAfterBind?() {
        if(this.placeHolder) {
            $(this.element).attr("placeholder",this.placeHolder);
        }
        if(this.type) {
            $(this.element).attr("type",this.type);
        }
        if(this.ariaLabel) {
            $(this.element).attr("aria-label",this.ariaLabel);
        }
        if(this.ariaDescribedBy) {
            $(this.element).attr("aria-describedby",this.ariaDescribedBy);
        }
        if(this.styleClass) {
            this.addClass(this.styleClass);
        }
    }

    setValue? (value: any){
        $(this.element).val(value);
    }

    getValue?() : any {
        return $(this.element).val();
    }
}

/**
 * 标题面板
 */
@pao.addon("标题面板", "有标题有子控件的面板", moduleName)
@paoClient.template('<div class="panel">\
        <div class="panel-title" name="title"></div>\
        <div class="panel-client" name="client"></div>\
    </div>', 'pao/client/client.css')
export class titlePanel extends paoClient.baseControl {
    /**
     * 标题控件
     */
    $title?: JQuery = undefined;
    /**
     * 客户端控件
     */
    $client?: JQuery = undefined;
    /**
     * 子控件
     */
    child?: paoClient.baseControl;
    /**
     * 标题文字
     */
    title?: string;

    onAfterBind?() {
        // 标题
        if(this.title) {
            this.$title.html(this.title);
            this.$title.show();
        } else {
            this.$title.hide();
        }
        if(this.child) {
            this.child.setTo(this.$client[0]);
        }
    }
}

/**
 * 布局面板
 */
@pao.addon("布局面板", "可以将子控件根据控件名称进行布局的面板", moduleName)
@paoClient.template('<div></div>')
export class layoutPanel extends paoClient.baseControl {
    /**
     * 子控件，第0个是主试图，以后的是辅助视图
     */
    children?: paoClient.baseControl[string];

    onAfterBind?() {
        for(let childName in this.children) {
            if(this.children[childName]) {
                let childContainer = $(this.element).find(`[name="${childName}"]`);
                // 名称匹配容器，如果匹配成功，则直接添加，否则添加到客户端容器中
                if(childContainer.length > 0) {
                    this.children[childName].appendTo(childContainer[0]);
                } else {
                    this.children[childName].appendTo(this.element);
                }
            }
        }
    }

    addChild(name: any, child: paoClient.baseControl) {
        if(!this.children)
            this.children = [];
        this.children[String(name)] = child;
    }
}
/**
 * 导航页面
 */
@pao.addon("导航页面", "导航条中每个导航页面的定义", moduleName)
@paoClient.template('<li> \
    <a name="link"> \
        <span name="icon"></span> \
        <span name="title"></span> \
    </a> \
</li>')
export class  tabPage extends paoClient.baseControl {
    $link?: JQuery = undefined;
    $icon?: JQuery = undefined;
    $title?: JQuery = undefined;
    
    /**
     * 标题
     */
    title: string;
    /**
     * 图标
     */
    icon: string;
    /**
     * 图标样式
     */
    iconClass: string;
    /**
     * 视图
     */
    view?: paoClient.baseControl | pao.factory;

    onChangeView? = (page: tabPage):void=>{};

    onAfterBind?() {
        this.$title.html(this.title);
        this.$icon.addClass(this.iconClass);
        this.$link.click(()=> {
          if(this.onChangeView) {
              this.onChangeView(this);
          }  
        });
    }
}

/**
 * 切换面板
 */
@pao.addon("切换面板", "可跳转切换的面板", moduleName)
@paoClient.template('<div class="tabbable tabs-left">\
        <ul id="nav" class="nav nav-pills nav-justified" name="navBar"></ul>\
        <div name="client"></div>\
    </div>')
export class tabControl extends paoClient.baseControl {
    /**
     * 导航条
     */
    $navBar?: JQuery = undefined;
    /**
     * 客户端控件
     */
    $client?: JQuery = undefined;
    /**
     * 导航信息
     */
    navPages?: tabPage[];

    /**
     * 更改页面
     * @param page 页面
     */
    changePage? (page: tabPage) {
        let view : paoClient.baseControl = pao.getObject(page.view);
        $(this.$content).children().hide();
        if(view.element) {
            $(view.element).show();
        } else {
            view.appendTo(this.$content[0]);
        }
    }

    /**
     * 绑定事件
     */
    onAfterBind? () {
        // 渲染导航页面
        if(this.navPages) {
            for(let nav of this.navPages) {
                nav.onChangeView = (page: tabPage) =>{
                    this.changePage(page);
                };
                nav.appendTo(this.$navBar[0]);
            }
        }

        // 加载首页
        if (this.navPages && this.navPages[0]) {
            this.changePage(this.navPages[0]);
        }
    }
}

/**
 * 字段编辑框
 */
@pao.addon("字段编辑框", "用于各种命名字段的编辑框", moduleName)
@paoClient.template('<div class="input-group"></div>')
export class fieldControl extends paoClient.baseControl {
    /**
     * 标签HTML
     */
    static readonly html_label = '<span class="input-group-addon">{0}</span>';
    static readonly html_button_clear = '<span class="input-group-btn">\
            <button name="clearButton" class="btn btn-default" type="button">清除</button>\
        </span>';

    /**
     * 前置标签
     */
    frontLabel?: string;
    /**
     * 后置标签
     */
    backLabel?: string;

    /**
     * 输入框
     */
    input: input;
    
    /**
     * 绑定后事件
     */
    onAfterBind?() {
        // 前标签
        if(this.frontLabel) {
            paoClient.appendTo(this.element, pao.format(fieldControl.html_label, this.frontLabel));
        }

        // 绑定输入控件
        this.input.appendTo(this.element);
        this.input.addClass("form-control");

        // 后标签
        if(this.backLabel) {
            paoClient.appendTo(this.element, pao.format(fieldControl.html_label, this.backLabel));
        }

        // 添加清除按钮
        let clearButton = paoClient.appendTo(this.element, fieldControl.html_button_clear);
        $(clearButton.element).click(()=> {
            this.onClearButtonClick();
        });
    }

    /**
     * 点击清除按钮事件
     */
    onClearButtonClick?() {
        this.input.setValue(null);
    }

    /**
     * 获取输入的值
     */
    getValue?() : any{
        return this.input.getValue();
    }

    /**
     * 设置输入框的值
     * @param value 值
     */
    setValue(value: any) {
        this.input.setValue(value);
    }
}